<template>
	<div class="subpage ear-container">
		<ul class="ear-box">
			<li @click="jumpEarDetail(item)" v-for="(item, index) in earidData" :key="index">
				<div class="ear-box-left">
					<img src="@/assets/img/home_img25.png" alt="">
					<span>耳标号</span>
				</div>
				<div class="ear-box-right">
					<span>ID{{item.cattleIdCard}}</span>
					<van-icon name="arrow" class="arrow-right" />
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			earidData: [],
			orderId: ''
		}
	},
	created() {
		this.getResaleEarId() // 耳标列表
		this.orderId = this.$route.params.orderId;
	},
	methods:{
		// 耳标列表
		getResaleEarId(){
			this.$api.get('/api/product/cattle_list/' + this.$route.params.orderId)
			.then(({data})=>{
				console.log(data)
				this.earidData = data;
			})
		},	
		// 耳标详情
		jumpEarDetail(item) {
			this.$router.push({
				path: '/my/erbiaoDetail/' +  item.id
			})
		},
		
	}
	
}
</script>

<style lang="scss" scoped>
	.ear-container {
		.ear-box {
			width: 100%;
			padding: 16px 16px 0;
			box-sizing: border-box;
			li {
				width: 100%;
				padding: 10px 16px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				font-size: 16px;
				color: #344047;
				border-radius: 8px;
				margin-bottom: 10px;
				.ear-box-left {
					display: flex;
					align-items: center;
					img {
						width: 36px;
						height: 36px;
						object-fit: cover;
						margin-right: 28px;
					}
				}
				.ear-box-right {
					display: flex;
					align-items: center;
					.arrow-right {
						margin-left: 10px;
					}
				}
			}
		}
	}
</style>
